<template>
    <div id="issue">
        <div class="issue-left">
            <div class="issue-left-title"><i class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-43"></i>Your
                Issues</div>
            <div class="issue-filter">
                <div class="issue-filter-item" v-for="item in filterList"
                    :class="item.value==filter?'issue-filter-active':''"
                    @click="filter=item.value;filterString=item.label;page=1;getIssueList()">{{item.label}}</div>
            </div>
            <div class="issue-left-title"><i class="iconfont icon-time2"></i>Issues Status</div>
            <div class="issue-filter">
                <div class="issue-filter-item" v-for="item in stateList"
                    :class="item.value==state?'issue-filter-active':''" @click="state=item.value;page=1;getIssueList()">
                    {{item.label}}</div>
            </div>
            <div class="issue-left-title"><i class="iconfont icon-time2"></i>Order by</div>
            <div class="issue-filter">
                <div class="issue-filter-item" v-for="item in sortList"
                    :class="item.value==sort?'issue-filter-active':''" @click="sort=item.value;page=1;getIssueList()">
                    {{item.label}}</div>
            </div>
        </div>
        <div class="issue-right" ref="scrollView" @scroll="issueScroll">
            <div class="common-title">{{filterString}}</div>
            <div class="issue-list" v-loading="loading_issues">
                <div class="issue-item" v-for="(item,index) in issueList">
                    <div class="issue-body">
                        <div class="issue-title">
                            <div class="issue-name">
                                {{item.title}}
                            </div>
                            <div class="issue-more">
                                <el-tag v-if="item.state=='closed'" size="small" type="success" effect="dark">Closed
                                </el-tag>
                                <el-tag v-if="item.state=='progressing'" size="small" type="warning" effect="dark">
                                    Progressing
                                </el-tag>
                                <el-tag v-if="item.state=='open'" size="small" type="info" effect="light">Openning
                                </el-tag>
                                <el-tag v-if="item.state=='rejected'" size="small" type="danger" effect="dark">Rejected
                                </el-tag>
                            </div>
                        </div>
                        <div class="issue-desc" v-html="item.markdown||markdownToHtml(index,item.body)"></div>
                        <div class="issue-tags">
                            <div class="issue-update"><i class="iconfont icon-clock"></i>
                                {{helper.friendlyTime(item.updated_at)}}
                            </div>

                            <el-tag size="mini" type="info" effect="plain" v-if="item.language">
                                {{item.language}}
                            </el-tag>
                            <el-tag size="mini" type="info" effect="plain" v-if="item.license">{{item.license}}
                            </el-tag>
                        </div>
                    </div>
                </div>
                <el-empty class="common-tips" :description="loading_tips" v-if="issueList.length==0"></el-empty>
            </div>
        </div>
    </div>
</template>
<script>
    import request from "@/lib/request";
    export
        default {
            data() {
                return {
                    loading_issues: false,
                    loading_tips: "Loading ...",
                    issueList: [],
                    page: 1,
                    keyword: "",
                    filter: "all",
                    filterString: "All issues",
                    filterList: [
                        {
                            label: "All issues",
                            value: "all",
                        },
                        {
                            label: "Created by me",
                            value: "created",
                        },
                        {
                            label: "Assigned to me",
                            value: "assigned",
                        },
                    ],
                    state: "open",
                    stateList: [
                        {
                            label: "Openning",
                            value: "open"

                        },
                        {
                            label: "Progressing",
                            value: "progressing"

                        },
                        {
                            label: "Rejected",
                            value: "rejected"

                        },
                        {
                            label: "Closed",
                            value: "closed"

                        },
                        {
                            label: "All status",
                            value: "all"

                        },
                    ],
                    sort: "updated",
                    sortList: [
                        {
                            label: "Last Updated",
                            value: "updated"

                        },
                        {
                            label: "Last Created",
                            value: "created"

                        }
                    ],
                }
            },
            created() {
                this.getIssueList();
            },
            methods: {
                markdownToHtml(index, markdown) {
                    var converter = new showdown.Converter();
                    //转换为HTML
                    var html = converter.makeHtml(markdown);
                    if (!html) {
                        html = ".";
                    }
                    this.issueList[index].markdown = html.replaceAll("https://images.gitee.com/", "https://gitee_image.hamm.cn/");
                    this.$nextTick(function () {
                        let doms = document.querySelectorAll(".issue-title a");
                        try {
                            for (let i in doms) {
                                doms[i].addEventListener("click", function (e) {
                                    let url = this.attributes.href.value;
                                    if (url) {
                                        window.open(url);
                                    }
                                    e.preventDefault();
                                });
                            }
                        } catch (e) {
                        }
                    });
                    this.$forceUpdate();
                },
                issueScroll(e) {
                    if (e.target.scrollTop + e.target.clientHeight + 30 > e.target.scrollHeight) {
                        if (!this.loading_issues) {
                            this.page++;
                            this.getIssueList();
                        }
                    }
                },
                reloadData() {
                    this.page = 1;
                    this.getIssueList();
                },
                getIssueList() {
                    let that = this;
                    if (that.loading_issues) {
                        return;
                    }
                    that.loading_issues = true;
                    that.loading_tips = "Loading ...";
                    request({
                        url: "/user/issues?q=" + that.keyword + "&page=" + that.page + "&filter=" + that.filter + "&sort=" + that.sort + "&per_page=20&state=" + that.state,
                        method: "GET",
                        success(res) {
                            if (that.page == 1) {
                                that.issueList = res;
                                that.$nextTick(function () {
                                    that.$refs.scrollView.scrollTop = 0;
                                });
                            } else {
                                that.issueList = that.issueList.concat(res);
                            }
                        },
                        final() {
                            that.loading_issues = false;
                            if (that.issueList.length == 0) {
                                that.loading_tips = "No Data...";
                            }
                        }
                    });
                },

            }
        }
</script>
<style>
    .issue-left-title {
        padding: 10px 0px;
        padding-left: 30px;
        font-size: 16px;
        margin-top: 20px;
    }

    .issue-left-title .iconfont {
        font-size: 20px;
        margin-right: 10px;
    }

    .issue-filter-item {
        padding: 15px;
        margin: 5px;
        padding-left: 60px;
        font-size: 14px;
        cursor: pointer;
        color: #999;
        font-weight: 300;
        border-radius: 10px;
    }

    .issue-filter-item:hover,
    .issue-filter-active {
        font-weight: bold;
        background-color: #f5f5f5;
    }


    #issue .issue-left {
        width: 250px;
        border-right: 5px solid var(--bg-color);
    }


    #issue .issue-right {
        flex-grow: 1;
        width: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        overflow-y: auto;
    }

    #issue .issue-list {
        flex-grow: 1;
        position: relative;
    }

    #issue .issue-item {
        text-decoration: none;
        text-align: left;
        vertical-align: top;
        border-bottom: 1px dashed #ddd;
        padding: 10px 20px;
        margin: 10px;
    }

    .issue-name .issue-verify {
        color: #187cd5;
        margin-right: 5px;
        font-size: 18px;
        vertical-align: top;
    }

    .issue-title {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .issue-name {
        font-size: 18px;
        color: #333;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-decoration: none;
        overflow: hidden;
        flex-grow: 1;
        font-weight: bold;
    }

    .issue-desc {
        font-size: 14px;
        margin-top: 10px;
        flex-grow: 1;
        color: #999;
        font-weight: 300;
    }

    .issue-desc * {
        vertical-align: top;
        word-break: break-all;
    }

    .issue-desc img {
        display: block;
        max-width: 100%;
        max-height: 500px;
    }

    .issue-more {
        font-size: 14px;
        color: #ccc;
        vertical-align: middle;
        white-space: nowrap;
        padding-top: 3px;
    }

    .issue-more * {
        vertical-align: middle;
        font-weight: 300;
    }

    .issue-more-item {
        margin-left: 5px;
        display: inline-block;
    }


    .issue-tips {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 14px;
    }

    .issue-tips .iconfont {
        display: block;
        font-size: 48px;
        margin-bottom: 10px;
        font-weight: 200;
    }

    .issue-tags {
        margin-top: 20px;
        font-size: 12px;
        color: #ccc;
    }

    .issue-tags div {
        display: inline-block;
        font-weight: 300;
    }

    .issue-update {
        font-size: 14px;
        margin-right: 5px;
    }

    .issue-update .iconfont {
        font-weight: bold;
    }

    .issue-tag {
        border-radius: 5px;
        border: 1px solid #ccc;
        font-size: 12px;
        padding: 1px 3px;
    }
</style>